<template>
	<view class="container" v-show="details">
		<view class="title">{{details.title}}</view>
		<view class="append">
			<view class="source">{{details.source}}</view>
			<date-format class="time" :threshold="[5*60*1000, 30*24*3600*1000]" :date="details.createdAt"></date-format>
		</view>
		<view class="subtitle" v-if="details.subtitle">
			<text class="iconfont icon-shangyinhao"></text>
			<text class="text">{{details.subtitle}}</text>
			<text class="iconfont icon-xiayinhao"></text>
		</view>
		<!-- 内容 -->
		<view class="content">{{details.content}}</view>
		<!-- 附加信息 -->
		<view class="append">
			<view class="view">
				阅读<text class="num">{{details.view}}</text>次
				赞叹<text class="num">{{details.hot}}</text>人
			</view>
			<view>
				修改于 <date-format class="time" :date="details.updatedAt" format="yyyy/MM/dd"></date-format>
			</view>
		</view>
		<!-- 关于作者 -->
		<view class="author" v-if="details.keyman">
			<image class="avatar" :src="details.keyman.avatarUrl"></image>
			<view class="keyman">{{details.keymanName}}</view>
			<view class="desc">{{details.title}}</view>
			<view><text class="iconfont icon-huawen-shang"></text></view>
			<view class="towards">
				<text>愿以此功德。庄严佛净土。\n上报四重恩。下济三途苦。\n若有见闻者。悉发菩提心。\n尽此一报身。同生极乐国。</text>
			</view>
			<view><text class="iconfont icon-huawen-xia"></text></view>
		</view>
		<view class="placeholder"></view>
		<!-- 底部功能条 -->
		<view class="bar" v-show="flag">
			<view class="action" @click="backToTop">
				<text class="iconfont icon-dingbu"></text>
				<text class="txt">顶部</text>
			</view>
			<view :class="['action',details.myPraise?'on':'']" @click="postPraise">
				<text :class="['iconfont',details.myPraise?'icon-yizan':'icon-zan']"></text>
				<text class="txt">赞叹</text>
			</view>
			<view :class="['action',details.myFav?'on':'']">
				<text :class="['iconfont',details.myFav?'icon-yishoucang':'icon-shoucang']"></text>
				<text class="txt">收藏</text>
			</view>
			<view class="action">
				<text class="iconfont icon-fenxiang"></text>
				<text class="txt">分享</text>
			</view>
			<view class="action">
				<text class="iconfont icon-huan"></text>
				<text class="txt">换一篇</text>
			</view>
		</view>
	</view>
</template>

<script>
	var timer; //定时器状态
	import apiArticle from '@/common/api/article.js'
	export default {
		data() {
			return {
				flag: true,
				articleId: 0,
				details: {},
			};
		},
		onLoad(option) {
			//获取参数
			this.articleId = option.id
			uni.setNavigationBarTitle({
				title: option.title,
			})
		},
		onReady() {
			this.loadData()
		},
		// 滚动监听事件
		onPageScroll(object) {
			// 只要滚动就清除状态
			clearTimeout(timer)
			// 告知标识 -> 开始滚动
			this.flag = false
			// 检测是否停留了 N 秒
			// 如果停留则表示滚动结束
			// N: 500(定时器时间 毫秒) -> 0.5秒算停止滚动
			// 滚动后多长时间算停止滚动
			timer = setTimeout(() => {
				// 告知标识 -> 结束滚动
				this.flag = true;
			}, 300);
		},
		methods: {
			// 返回顶部
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			// 赞叹
			postPraise() {

			},
			// 收藏
			postCollect() {

			},
			// 加载详情
			loadData() {
				apiArticle.details({
					id: this.articleId,
				}).then(res => {
					this.details = res
					console.log(this.details)
					uni.setNavigationBarTitle({
						title: res.title,
					})
				}).catch(err => {
					console.error(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {

		.title {
			margin: 36rpx 25rpx;
			font-size: 46rpx;
			font-weight: bold;
			color: #333333;
		}

		.append {
			margin: 0rpx 25rpx;
			display: flex;
			font-size: 32rpx;
			justify-content: space-between;
			color: rgba(73, 49, 41, 0.8);

			.num {
				color: #493129;
				margin: 0 7rpx;
				font-size: 35rpx;
			}
		}

		// 附标题
		.subtitle {
			margin: 20rpx 25rpx;
			background-color: rgba(254, 249, 241, 0.9);
			border-radius: 10rpx;
			padding: 20rpx;

			.iconfont {
				color: #333333;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.text {
				color: #493129;
				line-height: 70rpx;
				font-size: 40rpx;
			}
		}

		// 正文
		.content {
			margin: 0rpx 25rpx;
			font-size: 49rpx;
			line-height: 75rpx;
			white-space: pre-wrap;
		}

		// 作者
		.author {
			margin-top: 100rpx;
			text-align: center;

			.avatar {
				width: 108rpx;
				height: 108rpx;
				border-radius: 10rpx;
				border: 5rpx solid #d5964d;
			}

			.keyman {
				font-size: 33rpx;
				font-weight: bold;
				color: #493129;
				margin: 10rpx;
			}

			.desc {
				color: rgba(73, 49, 41, 0.5);
				font-size: 30rpx;
				margin: 10rpx 0 50rpx 0;
			}

			.icon-interval-up,
			.icon-interval-down {
				color: #d5964d;
			}

			.towards {
				margin: 7rpx;
				color: #493129;
				font-size: 30rpx;
				font-weight: bold;
				white-space: pre-wrap;
			}
		}

		.placeholder {
			height: 158rpx;
			width: 100%;
		}

		.bar {
			width: 100%;
			height: 128rpx;
			background: #FBF4EA;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.on {
				color: #ffa74b !important;
			}

			.action {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #493129;

				.iconfont {
					font-size: 42rpx;
				}

				.txt {
					margin-top: 9rpx;
				}
			}
		}
	}
</style>
